<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/Strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
  <title>Connection Example for FreeGroup Draw2D 0.9.26</title>
        <link type="text/css" rel="stylesheet" href="../demo.css" />

    <!-- common, all times required, imports -->        <SCRIPT src='../../wz_jsgraphics.js'></SCRIPT>      <SCRIPT src='../../mootools.js'></SCRIPT>      <SCRIPT src='../../moocanvas.js'></SCRIPT>      <SCRIPT src='../../draw2d.js'></SCRIPT>


        <!-- example specific imports -->
	<SCRIPT src="Start.js"></SCRIPT>
	<SCRIPT src="End.js"></SCRIPT>
	<SCRIPT src="ContextmenuConnection.js"></SCRIPT>
	<SCRIPT src="MyInputPort.js"></SCRIPT>
	<SCRIPT src="MyOutputPort.js"></SCRIPT>
</head>
<body onselectstart="return false;" style="margin:0px;padding:0px;" onkeydown="">
<div id="scrollarea" style="position:absolute;left:200px;top:200px;width:800px;height:400px;overflow:hidden;overflow-x:auto;overflow-y:auto" >
      <div id="paintarea" style="position:absolute;left:0px;top:0px;width:3000px;height:3000px" >
         <!-- The information help text -->
         <div class="stickyNote">
         <center><b>Draw2D 0.9.26 - A simple diagram drawing demo<br>
         by Andreas Herz (a.herz @ freegroup.de)
         <br>
         </b>
         <br>
         <div style="color:red;font-size:9pt">Focus of this example: Create a scrollable canvas area within any HTML page.</div>
         </center>
         <br>
         <center>See more on <a href="http://www.draw2d.org">FreeGroup Draw2D 0.9.26</a></center>
         </div>
      </div>
</div>
<script>
  // Create an interactive Canvas
  //
  draw2d.Connection.setDefaultRouter(new draw2d.FanConnectionRouter());
  var workflow  = new draw2d.Workflow("paintarea");
  workflow.setViewPort("scrollarea");

  // Add an simple annotation to the canvas
  //
  var annotation = new draw2d.Annotation("NOTE: Drag&Drop the red port to the blue port to create a connection. Use the connection context menu to switch the router implementation.");
  annotation.setDimension(300,70);
  workflow.addFigure(annotation,100,200);


  // Add the start node to the canvas
  //
  var startObj = new draw2d.Start();
  workflow.addFigure(startObj, 450,300);

  // Add the end node to the canvas
  //
  var endObj   = new draw2d.End();
  workflow.addFigure(endObj,600,350);

  // create a new connection
  var c = new draw2d.ContextmenuConnection();
  c.setSource(startObj.outputPort);
  c.setTarget(endObj.inputPort);
  workflow.addFigure(c);

  // create a new connection
  c = new draw2d.ContextmenuConnection();
  c.setSource(startObj.outputPort);
  c.setTarget(endObj.inputPort);
  workflow.addFigure(c);

  // create a new connection
  c = new draw2d.ContextmenuConnection();
  c.setRouter(new draw2d.ManhattanConnectionRouter());
  c.setSource(startObj.outputPort3);
  c.setTarget(endObj.inputPort4);

  workflow.addFigure(c);


</script>
<table width="100%">
<tr width="100%">
<td align="center">
<font size=50>This is some text</font>
</td>
</tr>
</table> 

</body>
</html>
